import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import React from 'react'
type PropsType = {
  id: string
  title: string
}
const Item: React.FC<PropsType> = ({ id, title }) => {
  const { attributes, setNodeRef, transform, transition, listeners } = useSortable({ id })
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    border: '1px solid #9b9b9b',
    margin: '10px 0',
    background: '#f1f1f1',
  }
  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      Item {id} {title}
    </div>
  )
}
export default Item
